<template>
  <div class="container">
    <nav class="navigation">
      <!-- 添加logo图片 -->
      <img src="@/assets/logo.png" alt="Logo" class="logo" />
      <!-- 在这里添加你的导航链接 -->
      <ul>
        <!-- <li><router-link to="/home">主页</router-link></li> -->
        <li><router-link v-if="!isAdmin" to="/activities">活动</router-link></li>
		<li><router-link v-if="!isOrganizer" to="/daka-activities">活动打卡</router-link></li>
        <li><router-link v-if="!isAdmin" to="/activity-review-list">活动评价</router-link></li>
        <li><router-link v-if="!isAdmin && !isOrganizer" to="/activity-review">评价活动</router-link></li>

        <li><router-link v-if="isOrganizer" to="/update-activity">活动申请</router-link></li>
		<li><router-link v-if="isOrganizer" to="/tuichu-activity">退出申请</router-link></li>
		<li><router-link v-if="isOrganizer" to="/create-activity">创建活动</router-link></li>
        
		<li><router-link  to="/users-info">个人信息</router-link></li>


<!--        <li><router-link to="/home">主页</router-link></li>-->
<!--        <li><router-link to="/activities">活动</router-link></li>-->
<!--        <li><router-link to="/create-activity">创建活动</router-link></li>-->
<!--        <li><router-link to="/pending-activities">审核活动</router-link></li>-->
<!--        <li><router-link to="/manage-activities">管理活动</router-link></li>-->
<!--        <li><router-link to="/users">管理用户</router-link></li>-->
<!--        <li><router-link to="/activity-review">评价活动</router-link></li>-->
<!--        <li><router-link to="/activity-review-management">管理评价</router-link></li>-->
<!--        <li><router-link to="/notification-manager">管理通知</router-link></li>-->

      </ul>
    </nav>
    <main class="main-content">
      <!-- 在这里添加你的主要内容 -->
      <router-view />
    </main>
  </div>
</template>

<script setup lang="ts" name="HomePage">
import {computed} from "vue";
import {useUserStore} from "@/stores/user.ts";

const userStore = useUserStore();

const isAdmin = computed(() => userStore.userType === 'event_administrator');
const isOrganizer = computed(() => userStore.userType === 'event_organizer');
</script>

<style scoped>
.container {
  display: flex;
  height: 100vh;
}

.navigation {
  width: 220px;
  background-color: #e2b6b5;
  color: white;
  padding: 15px;
  box-shadow: 2px 0 5px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  height: 100vh; /* 设置侧边栏高度为视口高度 */
}

nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

nav li {
  margin: 15px 0;
}

nav a {
  color: white;
  text-decoration: none;
  font-size: 16px;
  display: block;
  padding: 10px 15px;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

nav a:hover {
  background-color: #ff80ad;
}

.main-content {
  width: 80%;
  padding: 1em;
  box-sizing: border-box;
}

.logo {
  width: 60px;             /* 设置logo图片的宽度 */
  margin-bottom: 20px;      /* 图片下方的间距 */
}
</style>